<template>
  <!-- -->
  <!-- <el-form ref="productFormRef" :model="productForm" :rules="productFormRules" label-width="80px">
  </el-form> -->
  <div class="el-form--inline">
    

<el-form-item label="名称" prop="productName">
  <el-input v-model="form.productName" placeholder="请输入名称" />
</el-form-item>
<el-form-item label="编码" prop="productCode">
  <el-input v-model="form.productCode" placeholder="请输入编码" />
</el-form-item>
<el-form-item label="简称" prop="alternativeName">
  <el-input v-model="form.alternativeName" placeholder="请输入简称" />
</el-form-item>
<el-form-item label="查询码" prop="lookup">
  <el-input v-model="form.lookup" placeholder="请输入查询码" />
</el-form-item>
<el-form-item label="分类" prop="categoryId">
  <!-- <el-input v-model="form.categoryId" placeholder="请输入分类" /> -->
  <el-cascader class="category-picker"
  ref="categoryCascaderRef"
    v-model="form.parentIds"
    :options="categoryTree"
    :props="categoryProps"
    @change="onChangeCategory"
    clearable></el-cascader>


</el-form-item>
<el-form-item label="规格" prop="specification">
  <el-input v-model="form.specification" placeholder="请输入规格" />
</el-form-item>
<el-form-item label="采购单位" prop="purchaseUnit">
  <el-input v-model="form.purchaseUnit" placeholder="请输入采购单位" />
</el-form-item>
<el-form-item label="单位" prop="standardUnit">
  <el-input v-model="form.standardUnit" placeholder="请输入单位" />
</el-form-item>
<el-form-item label="拆零单位" prop="unboxUnit">
  <el-input v-model="form.unboxUnit" placeholder="请输入拆零单位" />
</el-form-item>
 <el-form-item label="品牌" prop="brand">
  <el-input v-model="form.brand" placeholder="请输入品牌" />
</el-form-item>
 <el-form-item label="唯一标识" prop="sku">
  <el-input v-model="form.sku" placeholder="请输入唯一标识" />
</el-form-item>



<el-form-item label="seo关键字" prop="metaKeywords">
  <el-input v-model="form.metaKeywords" placeholder="请输入seo关键字" />
</el-form-item>
<el-form-item label="seo标题" prop="metaTitle">
  <el-input v-model="form.metaTitle" placeholder="请输入seo标题" />
</el-form-item>
<el-form-item label="seo描述" prop="metaDescription">
  <el-input v-model="form.metaDescription" placeholder="请输入seo描述" />
</el-form-item>

<el-form-item label="供应商id" prop="vendorId">
  <el-input v-model="form.vendorId" placeholder="请输入供应商id" />
</el-form-item>
<el-form-item label="售价" prop="salesPrice">
  <el-input v-model="form.salesPrice" placeholder="请输入售价" />
</el-form-item>
<el-form-item label="原价" prop="oldSalesPrice">
  <el-input v-model="form.oldSalesPrice" placeholder="请输入原价" />
</el-form-item>
<el-form-item label="采购价" prop="purchasePrice">
  <el-input v-model="form.purchasePrice" placeholder="请输入采购价" />
</el-form-item>
<el-form-item label="上架标志" class="radio-item">
  <el-radio-group v-model="form.published">
	<el-radio
	  v-for="dict in publishedOptions"
	  :key="dict.itemValue"
	  :label="+ dict.itemValue"
	>{{dict.itemLabel}}</el-radio>
  </el-radio-group>
</el-form-item>
<!-- 字符串转数值 -->
<!-- :label="parseInt(dict.itemValue)" -->
<el-form-item label="删除标志" class="radio-item">
  <el-radio-group v-model="form.deleted">
	<el-radio
	  v-for="dict in deletedOptions"
	  :key="dict.itemValue"
	  :label="+ dict.itemValue"
	>{{dict.itemLabel}}</el-radio>
  </el-radio-group>
</el-form-item>
<el-form-item label="显示顺序" prop="displayOrder">
  <el-input v-model="form.displayOrder" placeholder="请输入显示顺序" />
</el-form-item>



  </div>

</template>
  
  <script>
  import { getDictionaryItems } from "@/utils/ruoyi"
  import {  getCategoryTree } from "@/api/catalog/category";

  export default {
      name: 'ProductInfo',
      props:{
        form: Object,
        rules: Object
      },
      data () {
        return {
          categoryProps: { 
            expandTrigger: 'hover',
            checkStrictly: true,
            label: 'categoryName',
            value: 'categoryId',
            children: 'children',

          },
          categoryTree: [],
          // productFormRules:{
          //   productName: [
          //     { required: true, message: '请输入活商品动名称', trigger: 'blur' },
          //     { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          //   ]
          // }
          // 上架标志字典
          publishedOptions: getDictionaryItems('sys_show_hide'),
          // 删除标志字典
          deletedOptions: getDictionaryItems('sys_show_hide')
        }
      },
      methods: {
        onChangeCategory(e) {
          // console.log('onChangeCategory', e)
          // console.log('this.form.parentIds select:', this.form.parentIds)

          // this.form.ancestors = this.form.parentIds.toString()
          // this.$refs.categoryCascaderRef.dropDownVisible = false
          this.$refs.categoryCascaderRef.toggleDropDownVisible()
        },
        async getTree() {
          const categories = await getCategoryTree()
          // console.log('categories:', categories.data)
          for(let c of categories.data ) {
            if(c.children && c.children.length === 0){
              c.children = null;
            }
          }

          this.categoryTree = categories.data
        },
        handleEdit () {
          return;
        },
        onSubmit() {
          // console.log('submit!');
        }
      },
      mounted () {
        // console.log('ProductInfo mounted')
        this.getTree()
        // console.log('categories:', this.categoryTree)
      },
      created () {
        // console.log('ProductInfo created')

        
      }
  }
  </script>
  
<style scoped>
  /deep/ .el-form-item--medium .el-form-item__label {
    width: 80px;
  }
  /* .el-form--inline .el-form-item .el-form-item__label{
    width: 80px;
  } */
  /deep/ .radio-item {min-width: 280px; }

  /deep/ .category-picker.el-cascader .el-input{
    max-width: 202px;
  }
</style>

<style>
  .el-cascader-panel .el-radio{
		width: 100%;
		height: 100%;
		z-index: 10;
		position: absolute;
		top: 10px;
		right: 10px;
	}
.el-cascader-panel .el-radio__input{
	visibility: hidden;
}
.el-cascader-panel .el-cascader-node__postfix {
	top: 10px;
}
</style>